<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>初学者进——前端女友帮助整理前端常用css样式（极其有用） | 惊蛰的博客</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
    <script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.11.2/js/v4-shims.js"></script>
    <!--    #代码高亮引入必要库-->
    <link href="https://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <!--    动画库-->
    <link rel="stylesheet" href="https://www.kettle.net.cn/animate/animate.min.css">
    <!--    评论-->
    <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
    <!--    aplayer-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
    <!--    jq-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!--    backstretch 轮播图-->
    <script type="text/javascript" src="//cdn.bootcss.com/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <!-- 引用 bbtalk -->
    <script src="https://cdn.jsdelivr.net/npm/bbtalk@0.1.5/dist/bbtalk.min.js"></script>
    
    <meta name="description" content="惊蛰的博客">
    
    <link rel="preload" href="/assets/css/0.styles.c076dd71.css" as="style"><link rel="preload" href="/assets/js/app.8e64649f.js" as="script"><link rel="preload" href="/assets/js/17.9b1a1e45.js" as="script"><link rel="preload" href="/assets/js/4.84c4889c.js" as="script"><link rel="preload" href="/assets/js/30.9b75bf1e.js" as="script"><link rel="prefetch" href="/assets/js/1.19f63e1b.js"><link rel="prefetch" href="/assets/js/10.76457569.js"><link rel="prefetch" href="/assets/js/11.2fabe50b.js"><link rel="prefetch" href="/assets/js/12.29f3cbb3.js"><link rel="prefetch" href="/assets/js/13.5bbd6907.js"><link rel="prefetch" href="/assets/js/14.97c38b2b.js"><link rel="prefetch" href="/assets/js/15.a6ea704f.js"><link rel="prefetch" href="/assets/js/16.bf8c8fc8.js"><link rel="prefetch" href="/assets/js/18.bcc6785d.js"><link rel="prefetch" href="/assets/js/19.af8c6c71.js"><link rel="prefetch" href="/assets/js/2.63f6fb06.js"><link rel="prefetch" href="/assets/js/20.04b27695.js"><link rel="prefetch" href="/assets/js/21.0ecdd73f.js"><link rel="prefetch" href="/assets/js/22.5a2b263f.js"><link rel="prefetch" href="/assets/js/23.a9412068.js"><link rel="prefetch" href="/assets/js/24.aedb6bde.js"><link rel="prefetch" href="/assets/js/25.dfc2456b.js"><link rel="prefetch" href="/assets/js/26.e8e572f6.js"><link rel="prefetch" href="/assets/js/27.0fd0718f.js"><link rel="prefetch" href="/assets/js/28.60ae6b13.js"><link rel="prefetch" href="/assets/js/29.701ebcc0.js"><link rel="prefetch" href="/assets/js/3.315403c1.js"><link rel="prefetch" href="/assets/js/31.67f8b095.js"><link rel="prefetch" href="/assets/js/32.b87582bb.js"><link rel="prefetch" href="/assets/js/33.7c0ab263.js"><link rel="prefetch" href="/assets/js/34.d4c2e482.js"><link rel="prefetch" href="/assets/js/35.88a27070.js"><link rel="prefetch" href="/assets/js/36.ccd7bbb9.js"><link rel="prefetch" href="/assets/js/37.a4ec9e64.js"><link rel="prefetch" href="/assets/js/38.888b51fa.js"><link rel="prefetch" href="/assets/js/39.822d40c5.js"><link rel="prefetch" href="/assets/js/40.76c692f0.js"><link rel="prefetch" href="/assets/js/5.94499d86.js"><link rel="prefetch" href="/assets/js/6.5934ba2a.js"><link rel="prefetch" href="/assets/js/8.b3a395d6.js"><link rel="prefetch" href="/assets/js/9.81a3105a.js">
    <link rel="stylesheet" href="/assets/css/0.styles.c076dd71.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div><div data-v-43936cb4><div class="container" data-v-43936cb4 data-v-43936cb4><div class="ordinary" data-v-43936cb4><div data-v-43936cb4><a target="_self" href="/" class="title flat-box waves-effect waves-block author" data-v-43936cb4>
                        jingzhe
                    </a></div> <div class="menu navigation" data-v-43936cb4><ul class="nav-list-h m-pc" data-v-43936cb4><li data-v-43936cb4><a href="/" id="home" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-home fa-fw" data-v-43936cb4></i>博客
                            </a></li> <li data-v-43936cb4><a href="/archives/" id="archives" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-archive fa-fw" data-v-43936cb4></i>归档
                            </a></li> <li data-v-43936cb4><a href="/friends/" id="friends" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-link fa-fw" data-v-43936cb4></i>友链
                            </a></li> <li data-v-43936cb4><a href="/aboutPage/" id="about" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-info-circle fa-fw" data-v-43936cb4></i>关于
                            </a></li> <li data-v-43936cb4><a id="other" class="menuitem flat-box faa-parent animated-hover waves-effect waves-block" data-v-43936cb4><i class="fa fa-info-circle fa-fw" data-v-43936cb4></i>其他
                            </a> <ul class="list-v" data-v-43936cb4><li data-v-43936cb4><a class="menuitem flat-box header toggle-mode-btn cutover" data-v-43936cb4><i class="fas fa-moon fa-fw" data-v-43936cb4></i> 暗黑模式
                                    </a></li> <li data-v-43936cb4><hr data-v-43936cb4></li> <li data-v-43936cb4><a href="/bb/" class="menuitem flat-box faa-parent animated-hover" data-v-43936cb4>
                                        哔哔哔
                                    </a></li> <li data-v-43936cb4><a target="_blank" href="https://blog.jingzhe.xyz" class="menuitem flat-box faa-parent animated-hover" data-v-43936cb4>
                                        旧版博客
                                    </a></li> <hr data-v-43936cb4> <li data-v-43936cb4><a href="/categories/" class="menuitem flat-box faa-parent animated-hover" data-v-43936cb4><i class="fa fa-folder-open fa-fw" data-v-43936cb4></i>
                                        分类
                                    </a></li> <li data-v-43936cb4><a href="/tags/" id="v2getting-started" class="menuitem flat-box faa-parent animated-hover" data-v-43936cb4><i class="fa fa-tags fa-fw" data-v-43936cb4></i> 标签
                                    </a></li></ul></li></ul></div> <div class="m_search" data-v-43936cb4><form name="searchform" class="form u-search-form" data-v-43936cb4><i class="icon fa fa-search fa-fw" data-v-43936cb4></i> <input type="text" placeholder="Search..." class="input u-search-input" data-v-43936cb4></form></div></div> <div class="paper" data-v-43936cb4></div></div></div> <div id="archives-pjax" class="paper" data-v-bb8ac3a0><div class="homeCover" data-v-bb8ac3a0></div> <div class="row" data-v-bb8ac3a0><div class="col-span-24" data-v-bb8ac3a0><div id="anchorPoint" data-v-bb8ac3a0></div></div> <div id="main-body-pjax" class="main-body" data-v-bb8ac3a0><div class="paper-page" data-v-bb8ac3a0><div show="true" class="homepage" data-v-9fc62fe0 data-v-bb8ac3a0><div class="post-list" data-v-9fc62fe0 data-v-9fc62fe0><div class="post-wrapper" data-v-9fc62fe0><div class="headimg-div" data-v-9fc62fe0><!----></div> <div class="meta" data-v-9fc62fe0><h2 data-v-9fc62fe0>初学者进——前端女友帮助整理前端常用css样式（极其有用）</h2> <div data-v-9fc62fe0><div class="author" data-v-9fc62fe0><a href="https://blog.jingzhe.xyz" rel="nofollow" class="author-div" data-v-9fc62fe0><img src="https://blog.jingzhe.xyz/jingzhe/jpg/1593256062295.jpeg" data-v-9fc62fe0> <a data-v-9fc62fe0>Jingzhe</a></a></div> <div class="time" data-v-9fc62fe0><div data-v-9fc62fe0><i aria-hidden="true" class="fa fa-calendar-alt fa-fw" data-v-9fc62fe0></i> <span data-v-9fc62fe0>2020-11-24T16:33:35.000Z</span></div></div> <div class="guest" data-v-9fc62fe0><i class="fa fa-comment-dots fa-fw" data-v-9fc62fe0></i> <span data-v-9fc62fe0>9</span></div></div></div> <div class="article" data-v-9fc62fe0><div class="leancloud_visitors" data-v-9fc62fe0><div class="content__default" data-v-9fc62fe0><p>html页面的元素有好多，分块儿级元素，行内元素，行内块儿级元素</p> <p>块儿级元素 ：像div，p，h这种的，不管宽是多少都占一整行</p> <p>行内元素：像span，a，label啊，i这种的，如果写好几个就挨着排队，而且width、margin-top,margin-bottom、padding-top对行内元素都没有用，</p> <p>padding-left,right,bottom和margin-left、margin-right是好用的，也就是margin的竖直方向上数值无效，padding只有padding-top数值无效</p> <p>1.子债父偿：
一个父元素margin：0；子元素给定margin-top:10px;margin-top会出现在父元素上
eg:</p> <div class="language- extra-class"><pre class="language-text"><code>	&lt;style&gt;
		.father{
			width:300px;
			height:300px;
			margin:0;
		}
		.son{
			width:200px;
			height:200px;
			margin-top:10px;
		}
	&lt;/style&gt;
	&lt;div class=&quot;father&quot;&gt;
		&lt;div class=&quot;son&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;
</code></pre></div><div class="language- extra-class"><pre><code>解决：	1.给父级添加一个border；
		2.给父级添加一个新的属性overflow:hidden;
		3. 不适用margin，在父级中使用padding-top。
</code></pre></div><p>2.display:inline-block<br>
bug1:inline-block元素之间存在空白间隙（原因行内标签回车、换行、或者制表位的空白产生的）     1、font-size:0;     2、两个标签之间的换行注释掉
bug2:inline-block元素错位                vertical-align:middle;//必须是行内元素之间才能居中，浮动的元素不能对齐</p> <p>3.select清除默认样式</p> <div class="language- extra-class"><pre class="language-text"><code>select{
		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;
		padding-right:15px;
	}
	select::-ms-expand { //清除ie的默认下拉框样式 隐藏下拉箭头
		display: none;
	}
</code></pre></div><p>4.table增加列，表格自动延伸，防止表格拥挤，并且超出显示滚动条</p> <div class="language- extra-class"><pre class="language-text"><code>  thead th{    					//通过防止文字换行来实现表格自动延伸
		white-space：nowrap；
		overflow:visible;
  }
  
</code></pre></div><p>5.让div的滚动条始终贴在屏幕底部</p> <div class="language- extra-class"><pre class="language-text"><code>让div相对于body绝对定位{
		position:absolute;或fixed
		bottom:0;
		top，left，right根据具体情况赋值
   }
</code></pre></div><p>6.table内的标签始终贴在td上边，给td  vertical-align:top;   靠下同理 bottom</p> <p>7.带滚动条的div里面的元素滚动到可视区域  document.getElementById(id).scrollIntoView();	//只能用dom获取，不能用jq获取元素</p> <p>8.offset()获取距离时，该元素必须是可见元素</p> <p>9.IE11下 table tr  visibility:hidden 时，td内容隐藏，边框不会隐藏，需要另外隐藏border:none;</p> <p>10、触发fixed定位弹窗的a标签不能用href=“#”，否则会跳回页面顶部，用javascript：void(0)[推荐，没有href的话，多次点击a会出现文字选中效果]或者去除href</p> <p>11、word-break：break-all 文字换行，允许在单词内换行,单词可能会被截断
keep-all  只能在半角空格或连字符处换行。</p> <div class="language- extra-class"><pre><code>word-wrap:break-word 文字换行，英文单词过长时，整体换到下一行


white-space：处理空白 nowrap  不换行，直到遇见br（默认多个空格按一个空格处理的）
					  pre     不换行，正常显示空格
					  pre-wrap 保留空格，正常换行
					  pre-line 合并空格变成一个空格，保留编辑器写的换行符（即写代码时的回车换行）
					  normal  多个空格按一个空格处理
					  
					  
overflow-wrap:break-word;
</code></pre></div><p>12、多行超出省略</p> <div class="language- extra-class"><pre class="language-text"><code>overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
</code></pre></div><p>13、ios单选按钮太丑</p> <div class="language- extra-class"><pre class="language-text"><code>  input[type=radio]{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: url(&quot;../web-images/radio1.png&quot;) no-repeat center;
        padding: 0;
        -webkit-background-size: 100%;
        background-size: 100%;
    }
    input[type=radio]:checked{
        background: url(&quot;../web-images/radio2.png&quot;) no-repeat center;
        -webkit-background-size: 100%;
        background-size: 100%;
    }
</code></pre></div><p>14、滚动条样式</p> <div class="language- extra-class"><pre class="language-text"><code>/*滚动条样式*/

::-webkit-scrollbar{
    width:8px;
    height:8px;
}
::-webkit-scrollbar-track{
    background: #f6f6f6;
    border-radius:4px;
}
::-webkit-scrollbar-thumb{
    background: #aaa;
    border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
    background: #747474;
}
::-webkit-scrollbar-corner {
    background: #f6f6f6;
}
</code></pre></div><p>15、高德地图android获取地理位置失败   (没试验过)</p> <div class="language- extra-class"><pre class="language-text"><code>&lt;meta name=&quot;referrer&quot; content=&quot;never&quot;&gt;
</code></pre></div><p>16、未知宽高图片在div内左右居中</p> <div class="language- extra-class"><pre class="language-text"><code>.banner{
		width: 100%;
		min-width: 1200px;
		margin: 0 auto;
		text-align: center;/*划重点*/
		overflow: hidden;/*划重点*/
	}
	.banner img{
		width: 1920px;
		margin:0 -100%;/*划重点*/
	}
</code></pre></div><p>17、左右始终居中对齐</p> <div class="language- extra-class"><pre class="language-text"><code>父级标签样式：
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	子级标签正常display:block;就可以

</code></pre></div><p>18、placeholder  字体颜色</p> <div class="language- extra-class"><pre class="language-text"><code>::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 16px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  font-size: 16px;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
  font-size: 16px;
}   
</code></pre></div><p>19、单边阴影</p> <div class="language- extra-class"><pre class="language-text"><code>.left{
	box-shadow:-5px 0 10px -5px #00ff00;
}
.bottom{
	box-shadow:0 5px 10px -5px #00ff00;
}
.right{
	box-shadow:5px 0 10px -5px #00ff00;
}
.top{
	box-shadow:0px -5px 10px -5px #00ff00;
}
.left-top{
	box-shadow:-5px -5px 10px  -4px #00ff00;            
}        
.right-top{
	box-shadow:5px -5px 10px -4px #00ff00;
}
.left-bottom{
	box-shadow:-5px 5px 10px -4px #00ff00;
}
.right-bottom{
	box-shadow:5px 5px 10px -4px #00ff00;
}
.no-left{
	/* .right-bottom,.right-top组合 */
	box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px  #00ff00;
}
.no-bottom{
	/* .left-top,.right-top组合 */
	box-shadow:-5px -5px 10px  -4px #00ff00,5px -5px 10px -4px  #00ff00;
}
.no-right{
	/* .left-top，.left-bottom组合 */
	box-shadow:-5px -5px 10px  -4px #00ff00,-5px 5px 10px -4px #00ff00;
}
.no-top{
	/* .left-bottom,,right-bottom组合 */
	box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;
}
</code></pre></div><p>20、按钮hover从左到右颜色过渡</p> <div class="language- extra-class"><pre class="language-text"><code>.lx_fpMore a {
    font-size: 16px;
    display: inline-block;
    background-color: #ededed;
    width: 169px;
    height: 41px;
    line-height: 41px;
    text-align: center;
    border-radius: 20.5px;
     /*重点*/
    position: relative; 
    transition: all 0.3s ease;
    z-index: 1;
    overflow: hidden;
}
 /*重点*/
.lx_fpMore a:after{
    position: absolute;
    content: '';
    width: 0;
    height:100%;
    top:0;
    right:0;
    background: #d6d6d6;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: -1;
    border-radius: 20.5px;
}
 /*重点*/
.lx_fpMore a:hover:after{
    width:100%;
    left:0;
}

</code></pre></div><p>21、css画三角形</p> <div class="language- extra-class"><pre class="language-text"><code>#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}
#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}
#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
 
}
#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}
#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
</code></pre></div></div></div></div> <div data-v-9fc62fe0><div class="article_copyright" data-v-089751b8 data-v-9fc62fe0><div class="article_footer" data-v-089751b8><div class="content" data-v-089751b8><blockquote data-v-089751b8><p data-v-089751b8>博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议</p> <p data-v-089751b8>本文永久链接是：<a href="/2020/11/24/%E5%88%9D%E5%AD%A6%E8%80%85%E8%BF%9B-%E5%89%8D%E7%AB%AF%E5%A5%B3%E5%8F%8B%E5%B8%AE%E5%8A%A9%E6%95%B4%E7%90%86%E5%89%8D%E7%AB%AF%E5%B8%B8%E7%94%A8css%E6%A0%B7%E5%BC%8F-%E6%9E%81%E5%85%B6%E6%9C%89%E7%94%A8/" style="display: block;" data-v-089751b8>/2020/11/24/%E5%88%9D%E5%AD%A6%E8%80%85%E8%BF%9B-%E5%89%8D%E7%AB%AF%E5%A5%B3%E5%8F%8B%E5%B8%AE%E5%8A%A9%E6%95%B4%E7%90%86%E5%89%8D%E7%AB%AF%E5%B8%B8%E7%94%A8css%E6%A0%B7%E5%BC%8F-%E6%9E%81%E5%85%B6%E6%9C%89%E7%94%A8/</a></p></blockquote></div></div> <div class="new-meta-box" data-v-089751b8><div itemprop="dateUpdated" class="new-date" data-v-089751b8><a data-v-089751b8><i aria-hidden="true" class="fa fa-edit fa-fw" data-v-089751b8></i> <p data-v-089751b8>更新于：2020-11-24T16:33:35.000Z</p></a></div></div> <div class="prev-next" data-v-089751b8><a href="/2020/08/28/%E5%85%AB%E4%BD%B0/" class="prev" data-v-089751b8><p class="title" data-v-089751b8><i aria-hidden="true" class="fa fa-chevron-left" data-v-089751b8></i>对电影《八佰》的一小点看法</p></a> <a href="/2020/08/07/%E5%85%B3%E4%BA%8E%E7%8C%AB%E9%BC%BB%E6%94%AF%E7%9A%84%E9%98%B2%E8%8C%83%E5%92%8C%E6%B2%BB%E7%96%97/" class="next" data-v-089751b8><p class="title" data-v-089751b8>关于猫鼻支的防范和治疗<i aria-hidden="true" class="fa fa-chevron-right" data-v-089751b8></i></p></a></div></div></div></div> <div class="article-comment" data-v-9fc62fe0><div class="comment" data-v-2ce08322 data-v-9fc62fe0><div class="post-list" data-v-2ce08322><div class="post-wrapper vcomment-div" data-v-2ce08322><em class="post-meta-item-text" data-v-2ce08322>阅读量 </em> <i class="leancloud-visitors-count" data-v-2ce08322>1000000</i> <div data-v-2ce08322></div></div></div></div></div></div></div></div> <div class="right-page" data-v-bb8ac3a0><div class="rightPage" data-v-1be37983 data-v-bb8ac3a0><div class="computer" data-v-1be37983 data-v-1be37983><!----> <div class="content" data-v-1be37983><div class="head" data-v-1be37983><a href="/aboutPage/" class="avatar flat-box rectangle" data-v-1be37983><img src="https://blog.jingzhe.xyz/jingzhe/jpg/1593256062295.jpeg" data-v-1be37983></a> <p data-v-1be37983><span data-v-1be37983>微雨众卉新，一雷惊蛰始。</span></p></div> <div class="social-wrapper" data-v-1be37983><span data-v-1be37983><a href="" rel="external nofollow noopener noreferrer" target="_blank" class="social fab fa-github flat-btn" data-v-1be37983></a></span> <span data-v-1be37983><a href="mailto: 12363078673@qq.com" rel="external nofollow noopener noreferrer" target="_blank" class="social fas fa-envelope flat-btn" data-v-1be37983></a></span> <span data-v-1be37983><a href="https://blog.csdn.net/u013605060" rel="external nofollow noopener noreferrer" target="_blank" class="social fas fa-code flat-btn" data-v-1be37983></a></span> <span data-v-1be37983><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1263078673&amp;site=qq&amp;menu=yes" rel="external nofollow noopener noreferrer" target="_blank" class="social fa fa-qq flat-btn" data-v-1be37983></a></span></div></div> <div class="content" data-v-1be37983><div class="social-wrapper" data-v-1be37983><div data-v-1be37983><i class="fas fa-folder-open fa-fw" data-v-1be37983></i> <span data-v-1be37983>文章分类</span></div> <div data-v-1be37983><ul class="entry navigation" data-v-1be37983><li data-v-1be37983><a href="/categories/笔记/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>笔记</div> <div class="badge" data-v-1be37983>(14)</div></a></li><li data-v-1be37983><a href="/categories/作品集/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>作品集</div> <div class="badge" data-v-1be37983>(1)</div></a></li><li data-v-1be37983><a href="/categories/随笔/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>随笔</div> <div class="badge" data-v-1be37983>(1)</div></a></li><li data-v-1be37983><a href="/categories/喵喵/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>喵喵</div> <div class="badge" data-v-1be37983>(2)</div></a></li><li data-v-1be37983><a href="/categories/创作集/" id="blogcategoriesmac" class="flat-box" data-v-1be37983><div class="name" data-v-1be37983>创作集</div> <div class="badge" data-v-1be37983>(1)</div></a></li></ul></div></div></div> <div class="content" data-v-1be37983><div class="social-wrapper" data-v-1be37983><div data-v-1be37983><i class="fas fa-tags fa-fw" data-v-1be37983></i> <span data-v-1be37983>热门标签</span></div> <div class="word-cloud" data-v-1be37983><a href="/tags/jenkins/" style="font-size:15px;" data-v-1be37983>jenkins</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/vue/" style="font-size:18px;" data-v-1be37983>vue</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/JS/" style="font-size:24px;" data-v-1be37983>JS</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/JAVA/" style="font-size:15px;" data-v-1be37983>JAVA</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/Trilateration/" style="font-size:15px;" data-v-1be37983>Trilateration</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/Google/" style="font-size:15px;" data-v-1be37983>Google</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/pjax/" style="font-size:15px;" data-v-1be37983>pjax</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E7%94%B5%E5%BD%B1/" style="font-size:15px;" data-v-1be37983>电影</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E5%85%AB%E4%BD%B0/" style="font-size:15px;" data-v-1be37983>八佰</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size:18px;" data-v-1be37983>前端</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/css/" style="font-size:18px;" data-v-1be37983>css</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/docker/" style="font-size:15px;" data-v-1be37983>docker</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/nginx/" style="font-size:18px;" data-v-1be37983>nginx</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/rtmp/" style="font-size:15px;" data-v-1be37983>rtmp</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/ffmpeg/" style="font-size:18px;" data-v-1be37983>ffmpeg</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/element-ui/" style="font-size:15px;" data-v-1be37983>element-ui</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/nodejs/" style="font-size:15px;" data-v-1be37983>nodejs</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/shake/" style="font-size:15px;" data-v-1be37983>shake</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/DoraemonKit/" style="font-size:15px;" data-v-1be37983>DoraemonKit</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E6%BB%B4%E6%BB%B4/" style="font-size:15px;" data-v-1be37983>滴滴</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/BIO/NIO/AIO/" style="font-size:15px;" data-v-1be37983>BIO/NIO/AIO</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/%E6%8F%92%E4%BB%B6/" style="font-size:15px;" data-v-1be37983>插件</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/HTTP/HTTPS/" style="font-size:15px;" data-v-1be37983>HTTP/HTTPS</a></div><div class="word-cloud" data-v-1be37983><a href="/tags/TCPIP/" style="font-size:15px;" data-v-1be37983>TCPIP</a></div></div></div> <div class="content" data-v-1be37983><div class="social-wrapper" data-v-1be37983><div data-v-1be37983><i class="fas fa-bullhorn fa-fw" data-v-1be37983></i> <span data-v-1be37983>公告</span></div> <div data-v-1be37983>
                        本站使用VuePress创建全站，还在不断完善中
                    </div></div></div> <div class="content" data-v-1be37983><div class="social-wrapper" data-v-1be37983><div data-v-1be37983><i class="fas fa-award fa-fw" data-v-1be37983></i> <span data-v-1be37983>站点信息</span></div> <div class="webinfo" data-v-1be37983><div class="webinfo-item" data-v-1be37983><div data-v-1be37983>文章数目：</div> <div data-v-1be37983>58 篇</div></div> <div class="webinfo-item" data-v-1be37983><div data-v-1be37983>已运行时间：</div> <div id="webinfo-runtime-count" data-v-1be37983>162 天</div></div> <div class="webinfo-item" data-v-1be37983><div data-v-1be37983>更新时间时间：</div> <div id="webinfo-runtime-count" data-v-1be37983>3 天前更新</div></div></div></div></div></div></div></div></div></div></div></div><div class="global-ui"></div></div>
<script src="/assets/js/app.8e64649f.js" defer></script><script src="/assets/js/17.9b1a1e45.js" defer></script><script src="/assets/js/4.84c4889c.js" defer></script><script src="/assets/js/30.9b75bf1e.js" defer></script>
<!-- 加入音乐-->
<div style="max-width: 750px;margin: 0 auto;padding: 40px;display: none;" id="meetingJs">
    <meting-js server="netease" type="playlist" id="567087780" list-max-height=150px></meting-js>
</div>
<!--全屏遮挡-->
<div class="fullScreen" style=""></div>

<canvas width="1413" height="968"
        style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<!--鼠标特效-->
<script src="https://cdn.jsdelivr.net/gh/zyoushuo/Blog/hexo/js/mouse_click.js"></script>
<script>
    // 写一个简单的pjax，适配于vuepress
    $(function () {
        function pjax(href, type) {
            //为了seo的优化，不支持方法直接跳转
            if (!history.pushState) {
                window.location.href = href;
            }
            let newHref = href;
            $.ajax({
                url: newHref, success: function (result) {
                    let resultObj = $(result);
                    //获取标题
                    let newTitle = resultObj.filter("title").text();
                    //循环Script标签，重新加载拥有defer的
                    $("script[defer]").remove();
                    $(result).filter('script[defer]').each(function () {
                        $("body").append(this.outerHTML);
                    })
                    $("#main-body-pjax").after("<div style='display: none;' id='main-body-pjax-other' class='"+$("#main-body-pjax").attr('class')+"'></div>");
                    $("#main-body-pjax-other")[0].innerHTML = resultObj.find("div[id=main-body-pjax]").innerHTML;
                    let state = ({
                        url: newHref, title: newTitle
                    });
                    if (type === 1) {
                        window.history.pushState(state, newTitle, newHref);
                    }
                    document.title = newTitle
                    //滚回顶部
                    // $('html, body').animate({scrollTop: 0}, 'slow');
                    //背景再次被重置
                    if (window.localStorage.getItem('cutoverColor') === "false") {
                        $(".fullScreen").css("background","#000")
                    }
                }
            });
        }

        // 手写一个简易版本的pjax，适用于vuepress
        $('body').on('click', 'a', function (e) {
            e.preventDefault();
            if (typeof $(this).attr("href") != "undefined") {
                pjax($(this).attr("href"), 1);
            }
        })
        window.addEventListener('popstate', function (evt) {
            let oldHref = evt.state.url;
            pjax(oldHref, 0);
        }, false);
    })


    window.onload = function () {
        //防止哔哔哔模块不显示
        bbtalk.init({
            appId: "gbNUwY2ePs3khwpWCJvSNMC5-MdYXbMMI",
            appKey: "ObQ0ANDmaRwvTREmMpzN4WNv",
            serverURLs: 'https://gbnuwy2e.api.lncldglobal.com'
        })
        //音乐模块显示
        $("#meetingJs").show();
        //背景切换图
        $.backstretch(
            ["https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/006.jpg",
                "https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/051.jpg",
                "https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/034.jpg",
                "https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg",
                "https://api.mtyqx.cn/api/random.php",
            ], {
                fade: 750, duration: 4000, speed: 500
            }
        );
        //头部，返回到顶部展示，右侧菜单的展示规则
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        headShow(t);
        backTopShow(t);
        rightPageMenuShow(t);
        //事件委托 (触发跳转)文章导航
        try {
            $("body").on('click', '.navigationContent', function (event) {
                let id = event.target.getElementsByTagName('a')[0].id;
                scroll(0, document.getElementById(id).offsetTop - 85);
            })
        } catch (e) {
        }
    }

    //移动滚动条
    function scroll(currentY, targetY) {
        // 计算需要移动的距离
        let needScrollTop = targetY - currentY
        let _currentY = currentY
        setTimeout(() => {
            // 一次调用滑动帧数，每次调用会不一样
            const dist = Math.ceil(needScrollTop / 10)
            _currentY += dist
            window.scrollTo(_currentY, currentY)
            // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
            if (needScrollTop > 10 || needScrollTop < -10) {
                scroll(_currentY, targetY)
            } else {
                window.scrollTo(_currentY, targetY)
            }
        }, 1)
    }

    /*监听滚动条，显示或者隐藏某些元素（右侧文章锚点和头部）*/
    window.onscroll = function () {
        let t = document.documentElement.scrollTop || document.body.scrollTop;
        headShow(t);
        backTopShow(t);
        rightPageMenuShow(t);
    }

    function headShow(t) {
        let container = document.querySelector('.container');//container 显示
        let height = (document.querySelector('.homeCover').offsetHeight) -
            (document.querySelector('.container').style.height);
        container.style.display = (t >= (height - 50)) ? "block" : "none";
    }

    function backTopShow(t) {
        try {
            let backTop = document.querySelector('.footer-up');//footer-up 显示
            backTop.style.display = (t >= 30) ? "block" : "none";
        } catch (e) {
        }
    }

    function rightPageMenuShow(t) {
        try {
            let rightPageMenu = document.querySelector('.paperMenu');//footer-up 显示
            rightPageMenu.className = (t >= 10) ? "content paperMenu suspension" : "content paperMenu";
        } catch (e) {
        }
    }


</script>


<script>
    //暗黑模式
    let cutoverColor = false;
    $(function () {
        if (window.localStorage.getItem('cutoverColor') === "false") {
            //线程独占
            setTimeout(function () {
                darkMode();
            }, 0);
        }
        $("body").on('click', '.cutover', function () {
            darkMode();
        })
    })

    function darkMode() {
        cutoverColor = !cutoverColor;
        window.localStorage.setItem('cutoverColor', !cutoverColor);
        if (cutoverColor) {
            document.documentElement.style.setProperty('--main', '#515a6e');
            document.documentElement.style.setProperty('--mainfont', '#fff');
            document.documentElement.style.setProperty('--headfont', '#fff');
            document.documentElement.style.setProperty('--color-list', '#fff');
            document.documentElement.style.setProperty('--color-tag', '#fff');
            $(".fullScreen").css("background","#000");
        } else {
            document.documentElement.style.setProperty('--main', '#ffff');
            document.documentElement.style.setProperty('--mainfont', '#515a6e');
            document.documentElement.style.setProperty('--headfont', '#2c3e50');
            document.documentElement.style.setProperty('--color-list', '#666');
            document.documentElement.style.setProperty('--color-tag', '#999');
            $(".fullScreen").css("background","");
        }
    }
</script>

<style>
    a {
        text-decoration: none
    }

    body {
        margin: 0 auto;
    }backstretch-item

    .fullScreen {
        left: 0px;
        top: 0px;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100vw;
        z-index: -999998;
        position: fixed;
    }
</style>
</body>
</html>
